<template>
    <div>
        <div align="center">
            <el-form style="background-color:#eef1f6;width: 80%;height:40px;" align="left" class="one">
                筛选查询
            </el-form>
            <el-form  :inline="true" class="demo-form-inline" style="width: 80%;">
                <el-form-item>
                    业务号：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.lbusinessId" placeholder="业务号"></el-input>
                </el-form-item>
                <el-form-item>
                    申请人：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.lname" placeholder="申请人"></el-input>
                </el-form-item>
                <el-form-item>
                    时间：
                </el-form-item>
                <el-form-item>
                    <el-input v-model="byte.createTime" placeholder="申请时间"></el-input>
                </el-form-item>
                <!--                <el-form-item>-->
                <!--                    <el-input v-model="byte.roleId" placeholder="申请时间"></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item>
                    <el-button @click="queryemp" type="success">查询</el-button>
                </el-form-item>
            </el-form>
        </div>

        <br>

        <div align="center">
            <!--             <el-table :data="tableData" border>-->
            <el-table
                    :data="
                tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)
               "
                    border
                    style="width: 80%"
                    :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                <el-table-column prop="lbusinessId" label="业务号"></el-table-column>
                <el-table-column prop="lname" label="申请人"></el-table-column>
                <el-table-column prop="ltypeId" label="身份证号"></el-table-column>
                <el-table-column prop="lphone" label="联系电话"></el-table-column>
                <el-table-column prop="createTime" label="申请时间"></el-table-column>
                <el-table-column label="业务类型">
                    <template v-slot="s">
                        {{ Text2[s.row.lbusiness - 1] }}
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template v-slot="s">
                        {{ Text[s.row.lstate - 1] }}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--分页-->
        <div align="center">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 3, 4, 5, tableData.length]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        name: "VitalizeBuild",
        data(){
            return{
                pageNum: 1,
                pageSize: 2,
                tableData: [],
                byte:{},
                Text2:[
                    "出租",
                    "转让",
                ],
                Text: [
                    "待受理",
                    "待公示",
                    "待审查",
                    "联审联办",
                    "待审批",
                    "已办完",
                    "不予受理",
                ],
            }
        },
        created() {
            this.queryemp();
            this.loadData();
        },
        methods:{
            //分页
            handleSizeChange(pageSize) {
                this.pageSize = pageSize;
            },
            handleCurrentChange(pageNum) {
                this.pageNum = pageNum;
            },
            loadData(){
                this.postRequest("/house/lease/leasewanlist",this.byte)
                    .then((res) => {
                        //console.log(res.data.list);
                        this.tableData=res.data.list
                    })
                    .catch((res) => {
                        console.log("出错了");
                        console.log(res);
                    });
            },
            queryemp(){
                //console.log(this.loginInfo.roleId)
                //this.byte.roleId=this.loginInfo.roleId
                this.loadData()
                // this.queryemp={}
            },
        }
    }
</script>

<style>
    .one {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
    .demo-form-inline{
        border-style: solid;
        border-width: 1px;
        border-color: rgb(189, 187, 187);
    }
</style>